<template>
  <div class="student">
    <el-card>
      <div class="search">
        <el-form :inline="true">
          <el-form-item label="题目ID：">
            <el-input v-model="params.id" clearable />
          </el-form-item>
          <el-form-item label="题目内容：">
            <el-input clearable />
          </el-form-item>
          <el-form-item label="年级:">
            <el-select v-model="params.level" placeholder="年级" style="width: 200px;" clearable>
              <el-option label="一年级" :value="1" />
              <el-option label="二年级" :value="2" />
              <el-option label="三年级" :value="3" />
              <el-option label="四年级" :value="4" />
              <el-option label="五年级" :value="5" />
              <el-option label="六年级" :value="6" />
              <el-option label="初一" :value="7" />
              <el-option label="初二" :value="8" />
              <el-option label="初三" :value="9" />
              <el-option label="高一" :value="10" />
              <el-option label="高二" :value="11" />
              <el-option label="高三" :value="12" />
            </el-select>
          </el-form-item>
          <el-form-item label="学科:">
            <el-select v-model="params.subjectId" placeholder="请选择" style="width: 200px;">
              <el-option v-for="item in subjectData" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="题型:">
            <el-select v-model="params.questionType" placeholder="请选择" style="width: 200px;">
              <el-option label="单选题" value="1" />
              <el-option label="多选题" value="2" />
              <el-option label="判断题" value="3" />
              <el-option label="填空题" value="4" />
              <el-option label="简答题" value="5" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getList">查询</el-button>

            <el-popover placement="bottom" :width="370" trigger="click">
              <template #reference>
                <el-button type="success">添加</el-button>
              </template>
              <el-button size="small" style="background-color: #FFBA00; color: #fff;"
                @click="add('single')">单选题</el-button>
              <el-button size="small" style="background-color: #FFBA00; color: #fff;"
                @click="add('multiple')">多选题</el-button>
              <el-button size="small" style="background-color: #FFBA00; color: #fff;" @click="add('TF')">判断题</el-button>
              <el-button size="small" style="background-color: #FFBA00; color: #fff;"
                @click="add('fill')">填空题</el-button>
              <el-button size="small" style="background-color: #FFBA00; color: #fff;"
                @click="add('answer')">简答题</el-button>
            </el-popover>

          </el-form-item>
        </el-form>
      </div>

      <!-- 列表 -->
      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="Id" width="50" />
        <el-table-column prop="subjectId" label="学科" width="120">
          <template v-slot="scope">
            {{ getSubjectName(scope.row.subjectId) }}
          </template>
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="100">
          <template v-slot="scope">
            <span v-if="scope.row.questionType == 1">单选题</span>
            <span v-else-if="scope.row.questionType == 2">多选题</span>
            <span v-else-if="scope.row.questionType == 3">判断题</span>
            <span v-else-if="scope.row.questionType == 4">填空题</span>
            <span v-else-if="scope.row.questionType == 5">简答题</span>
          </template>
        </el-table-column>
        <el-table-column prop="shortTitle" label="题干" width="240" />
        <el-table-column prop="score" label="分数" />
        <el-table-column prop="difficult" label="难度" />
        <el-table-column prop="createTime" label="创建时间" width="240" />
        <el-table-column label="操作" width="200px">
          <template v-slot="scope">
            <el-button size="small">预览</el-button>
            <el-button size="small" @click="questionEdit(scope.row.id, scope.row.questionType)">编辑</el-button>
            <el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div style="margin-top: 20px;">
        <el-pagination v-model:current-page="params.pageIndex" v-model:page-size="params.pageSize"
          :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import ExamAPI, { QuestionParams, QuestionItem, SubjectResponse } from '@/api/system/exam.api'

const router = useRouter()
let loading = ref(false)
let tableData = ref<QuestionItem[]>([])
let total = ref(0)

//存储学科信息
let subjectData = ref<SubjectResponse[]>([])

const handleSizeChange = (val: number) => {
  params.value.pageSize = val
  getList()
}

const handleCurrentChange = (val: number) => {
  params.value.pageIndex = val
  getList()
}

//初始化列表参数params
const params = ref<QuestionParams>({
  id: null,
  questionType: null,
  level: null,
  subjectId: null,
  pageIndex: 1,
  pageSize: 10
})

//获取学科
function getSubject() {
  ExamAPI.getSubject().then(res => {
    subjectData.value = res
  })
}

//学科id转文字
function getSubjectName(id: string | number) {
  const target = subjectData.value.filter(item => item.id == id)[0]
  return `${target.name}(${target.levelName})`
}


//初始化列表
function getList() {
  loading.value = true
  ExamAPI.getQuestion(params.value).then(res => {
    console.log(res);
    tableData.value = res.list
    total.value = res.total
  }).finally(() => {
    loading.value = false
  })
}


//新增题
function add(flag: string) {
  if (flag == "single") {
    router.push(`/exam/question/edit/SingleChoice`)
  } else if (flag == "multiple") {
    router.push(`/exam/question/edit/MultipleChoice`)
  } else if (flag == "TF") {
    router.push(`/exam/question/edit/TFChoice`)
  } else if (flag == "fill") {
    router.push(`/exam/question/edit/BlankFilling`)
  } else if (flag == "answer") {
    router.push(`/exam/question/edit/ShortAnswer`)
  }
}

//删除功能
function del(id: string | number) {
  ExamAPI.delQuestion(id).then(() => {
    ElMessage({
      message: '删除成功',
      type: 'success',
    })
    getList()
  })
}

//编辑功能
function questionEdit(id: string | number, type: string | number) {
  if (type == 1) {
    router.push(`/exam/question/edit/SingleChoice?id=${id}`)
  } else if (type == 2) {
    router.push(`/exam/question/edit/MultipleChoice?id=${id}`)
  } else if (type == 3) {
    router.push(`/exam/question/edit/TFChoice?id=${id}`)
  } else if (type == 4) {
    router.push(`/exam/question/edit/BlankFilling?id=${id}`)
  } else if (type == 5) {
    router.push(`/exam/question/edit/ShortAnswer?id=${id}`)
  }
}

//预览功能


onMounted(() => {
  getSubject()
  getList()
})
</script>

<style scoped>
.student {
  padding: 16px;
}
</style>
